<template>
  <div id="DiskImformation" ref="DiskImformation" class="DiskImformation">
    <el-form :inline="true">
      <el-row class="diskNameText">
        <template v-for="(item, index) in dbDataArr">
          <el-col :span="8" :key="index">
            <p class="twoLable">{{ item.NAME }}</p>
          </el-col>
        </template>
      </el-row>
      <el-row class="waterPage">
        <el-col :span="24">
          <div ref="waterPolo" class="page"></div>
        </el-col>
      </el-row>
      <el-row>
        <template v-for="(item, index) in dbDataArr">
          <el-col :span="8" :key="index">
            <p class="oneLable">
              可用：
              <span class="lableNumber">{{ item.FREE_GB }}GB</span>
            </p>
            <p class="oneLable">
              总：
              <span class="lableNumber">{{ item.TOTAL_GB }}GB</span>
            </p>
          </el-col>
        </template>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { fetchData } from "@/api/index.js";
import bus from "common/bus.js";

export default {
  data() {
    return {
      postData: {
        opera: "dbAsmGroup",
        curPage: 1,
        pageSize: 3,
        sort: {
          sortColumn: "",
          sortOrders: "",
        },
        filtersType: "fuzzyquery",
        filters: {
          monid: "",
        },
      },
      freeGB: "",
      totalGB: "",
      waterPolo: {},
      EChartsOption: {
        series: [
          //系统内存
          {
            radius: "85%",
            type: "liquidFill",
            center: ["18%", "55%"],
            data: [{ value: 0 }],
            outline: {
              borderDistance: 0,
              itemStyle: {
                borderWidth: 4,
                borderColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(69, 73, 240, 0)",
                    },
                    {
                      offset: 0.5,
                      color: "rgba(69, 73, 240, .25)",
                    },
                    {
                      offset: 1,
                      color: "rgba(69, 73, 240, 1)",
                    },
                  ],
                  globalCoord: false,
                },
                shadowBlur: 10,
                shadowColor: "#000",
              },
            },
            label: {
              fontSize: 22,
              color: "rgb(0, 255, 0)",
            },
            backgroundStyle: {
              color: {
                type: "linear",
                x: 1,
                y: 0,
                x2: 0.5,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "rgba(68, 145, 253, 0)",
                  },
                  {
                    offset: 0.5,
                    color: "rgba(68, 145, 253, .25)",
                  },
                  {
                    offset: 0,
                    color: "rgba(68, 145, 253, 1)",
                  },
                ],
                globalCoord: false,
              },
            },
          },
          {
            radius: "85%",
            type: "liquidFill",
            center: ["50%", "55%"],
            data: [{ value: 0 }],
            outline: {
              borderDistance: 0,
              itemStyle: {
                borderWidth: 4,
                borderColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(69, 73, 240, 0)",
                    },
                    {
                      offset: 0.5,
                      color: "rgba(69, 73, 240, .25)",
                    },
                    {
                      offset: 1,
                      color: "rgba(69, 73, 240, 1)",
                    },
                  ],
                  globalCoord: false,
                },
                shadowBlur: 10,
                shadowColor: "#000",
              },
            },
            label: {
              fontSize: 22,
              color: "rgb(0, 255, 0)",
            },
            backgroundStyle: {
              color: {
                type: "linear",
                x: 1,
                y: 0,
                x2: 0.5,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "rgba(68, 145, 253, 0)",
                  },
                  {
                    offset: 0.5,
                    color: "rgba(68, 145, 253, .25)",
                  },
                  {
                    offset: 0,
                    color: "rgba(68, 145, 253, 1)",
                  },
                ],
                globalCoord: false,
              },
            },
          },
          {
            radius: "85%",
            type: "liquidFill",
            center: ["83%", "55%"],
            data: [{ value: 0 }],
            outline: {
              borderDistance: 0,
              itemStyle: {
                borderWidth: 4,
                borderColor: {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: "rgba(69, 73, 240, 0)",
                    },
                    {
                      offset: 0.5,
                      color: "rgba(69, 73, 240, .25)",
                    },
                    {
                      offset: 1,
                      color: "rgba(69, 73, 240, 1)",
                    },
                  ],
                  globalCoord: false,
                },
                shadowBlur: 10,
                shadowColor: "#000",
              },
            },
            label: {
              fontSize: 22,
              color: "rgb(0, 255, 0)",
            },
            backgroundStyle: {
              color: {
                type: "linear",
                x: 1,
                y: 0,
                x2: 0.5,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "rgba(68, 145, 253, 0)",
                  },
                  {
                    offset: 0.5,
                    color: "rgba(68, 145, 253, .25)",
                  },
                  {
                    offset: 0,
                    color: "rgba(68, 145, 253, 1)",
                  },
                ],
                globalCoord: false,
              },
            },
          },
        ],
      },
      timerName: "DiskImformation",
      timerEventName: "timerDiskImformation",
      timerInterval: 1000 * 60,
      selectedMonID: {},
      dbDataArr: [],
    };
  },
  created() {
    bus.$on("selectedMonID", (msg) => {
      this.resetData();

      this.selectedMonID = msg;
      this.postData.filters.monid = this.selectedMonID.selectedDBMonID;
      this.getData();
    });

    bus.$emit("timerNewTodo", {
      name: this.timerName,
      eventName: this.timerEventName,
      interval: this.timerInterval,
      intervalNow: 0,
    });

    bus.$on(this.timerEventName, (msg) => {
      if (msg.isGetData) {
        this.getData();
      }
    });
  },
  mounted() {
    this.waterPolo = this.$echarts.init(this.$refs.waterPolo);

    this.drawMemoryLine();
  },
  computed: {
    postDataFn() {
      return {
        postData: JSON.stringify(this.postData),
      };
    },
  },
  methods: {
    getData() {
      fetchData(this.postDataFn).then((res) => {
        if (res.data.length > 0) {
          this.dbDataArr = res.data;

          this.dbDataArr.forEach((element, index) => {
            this.EChartsOption.series[index].data[0].value = element.USE_PER;
          });
        }
        this.drawMemoryLine();
      });
    },
    drawMemoryLine() {
      this.waterPolo.setOption(this.EChartsOption, true);
    },
    resetData() {
      this.dbDataArr = [];
      this.EChartsOption.series[0].data[0].value = 0;
      this.EChartsOption.series[1].data[0].value = 0;
      this.EChartsOption.series[2].data[0].value = 0;
    },
  },
  beforeDestroy() {
    bus.$emit("timerNewTodo", {
      name: this.timerName,
    });

    this.waterPolo.dispose();
  },
  watch: {},
};
</script>

<style scoped>
.DiskImformation {
  padding: 0px 5px;
  height: calc(100% - 22px - 8px);
  text-align: center;
  color: aliceblue;
}

.basicImformation {
  background-color: rgba(0, 0, 0, 0);
}
.twoLable >>> .el-form-item__label {
  color: aliceblue;
  line-height: 16px;
  font-size: small;
  padding: 0 0 0 0;
}
.twoLable >>> .el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
  margin-bottom: 0px;
  margin-right: 0px;
}
.diskNameText {
  height: 10%;
}
.waterPage {
  height: 58%;
  padding-left: 0px !important;
  padding-right: 0px !important;
}
.page {
  min-height: 98px;
}
.butomLable {
  height: calc(100% - 68%);
  padding-left: 0px !important;
  padding-right: 0px !important;
  text-align: center;
  /* padding-top: 2%; */
}
.oneLable >>> .el-form-item__label {
  padding: 0 0 0 0;
  color: aliceblue;
}
.lableNumber {
  color: aliceblue;
  width: auto;
}
@media screen and (max-width: 1365px) and (min-width: 1280px) {
  p.oneLable {
    font-size: 8px !important;
  }
}
@media screen and (max-width: 1600px) and (min-width: 1365px) {
  p.oneLable {
    font-size: 8px !important;
  }
}
@media screen and (max-width: 1778px) and (min-width: 1600px) {
  .oneLable {
    font-size: 10px !important;
  }
}
@media screen and (max-width: 1920px) and (min-width: 1778px) {
  .oneLable {
    font-size: 12px !important;
  }
}
@media screen and (max-width: 2560px) and (min-width: 1920px) {
  .oneLable {
    font-size: 20px;
  }
}
@media screen and (min-width: 2560px) {
  .oneLable {
    font-size: 22px;
  }
}
</style>    